<div class="form-group clearfix">
  <div class="form-inline pull-left">
    <button type="button" class="btn btn-default" (click)="addTempModal.show();keyList = [];">新增模板</button>
  </div>
  <div class="form-inline pull-right">
    <input class="form-control" placeholder="模板名称" name="title" [(ngModel)]="keyword">
    <button class="btn btn-default" (click)="search()">搜索</button>
    <button class="btn btn-default" (click)="reset()">重置</button>
  </div>
</div>

<div>
  <table class="table">
    <thead>
    <tr>
      <th>id</th>
      <th>wx_id</th>
      <th>标题</th>
      <th>关键词</th>
      <th>创建时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of templateList">
      <td>{{item.id}}</td>
      <td>{{item.wx_id}}</td>
      <td>{{item.title}}</td>
      <td *ngIf="!item.keyword_list">无</td>
      <td><span class="mr-5" *ngFor="let ite of item.keyword_list">{{ite}}</span></td>
      <td>{{item.created_at}}</td>
      <td>
        <a href="javascript:;" (click)="editTempDialog(item)">编辑</a>-
        <a href="javascript:;" (click)="delTemp(item.id)">删除</a>
      </td>
    </tr>
    </tbody>
  </table>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="itemsPerPage" [(ngModel)]="currentPage"  [maxSize]="5"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;" [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<!-- 新增消息模板 -->
<div class="modal fade" bsModal #addTempModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新增消息模板</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addTempModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addTempForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3">模板编号</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="addTemp.wx_id" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">模板名称</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="title" [(ngModel)]="addTemp.title" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2 text-right">id</label>
            <div class="col-md-3">
              <input type="number" class="form-control" name="id" [(ngModel)]="id">
            </div>
            <label class="col-md-2 text-right">关键词</label>
            <div class="col-md-3">
              <input type="text" class="form-control" name="key" [(ngModel)]="key">
            </div>
            <button class="btn btn-default" (click)="addKeyWord()">添加</button>
          </div>
          <div class="form-group clearfix">
            <span class="col-md-3" *ngFor="let item of keyList;let i = index">{{item.id}} {{item.key}}<span class="iconfont icon-cuowu" (click)="keyList.splice(i,1)"></span></span>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="addTempModal.hide();">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!addTempForm.form.valid || !keyList.length" (click)="addTempSubmit()">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 编辑消息模板 -->
<div class="modal fade" bsModal #editTempModal="bs-modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新增消息模板</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editTempModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editTempForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3">模板编号</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="name" #name="ngModel" [(ngModel)]="editTemp.wx_id" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">模板名称</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="title" [(ngModel)]="editTemp.title" required>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2 text-right">id</label>
            <div class="col-md-3">
              <input type="number" class="form-control" name="id" [(ngModel)]="id">
            </div>
            <label class="col-md-2 text-right">关键词</label>
            <div class="col-md-3">
              <input type="text" class="form-control" name="key" [(ngModel)]="key">
            </div>
            <button class="btn btn-default" (click)="addKeyWord()">添加</button>
          </div>
          <div class="form-group clearfix">
            <span class="col-md-3" *ngFor="let item of keyList;let i = index">{{item.id}} {{item.key}}<span class="iconfont icon-cuowu" (click)="keyList.splice(i,1)"></span></span>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="editTempModal.hide();">取消</button>
            <button class="btn btn-success btn-md-long" type="submit" [disabled]="!editTempForm.form.valid || !keyList.length" (click)="editTempSubmit()">确定</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- 确认删除弹窗 -->
<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <p>确定删除吗？</p>
        <div class="text-right mt20">
          <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
          <button class="btn btn-success btn-md-long" type="button" (click)="delTempSubmit()">确定</button>
        </div>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event"></app-notification>
